<template>
  <div class="index">
    <el-container>
      <el-header>
        <div class="logo">
          <img src="../assets/logo.png" title="logo" width="40px" height="40px">
        </div>
        <div class="logout">
          欢迎光临~
          <el-button type="text" @click="dialogVisible = true">退出</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>确认退出吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="logout">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="title">
          <h1>电商后台管理系统</h1>
        </div>
      </el-header>
      <el-container class="container">
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                :default-active="defaultPage"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                unique-opened
                router
                active-text-color="#ffd04b">
                <el-submenu v-for="item in data" :key="item.id" :index="item.id+''">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{ item.authName }}</span>
                  </template>
                  <el-menu-item :index="item2.path" router v-for="item2 in item.children" :key="item2.id">
                      <i class="el-icon-menu"></i>
                      <span slot="title">{{ item2.authName }}</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  computed: {
    defaultPage () {
      return this.$route.path.slice(1).split('-')[0]
    }
  },
  data () {
    return {
      data: null,
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    logout () {
      this.dialogVisible = false
      this.$message({
        message: '退出成功',
        type: 'success'
      })
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  },
  created () {
    this.$axios({
      method: 'get',
      url: 'menus'
    }).then(res => {
      this.data = res.data
    })
  }
}
</script>

<style lang="scss">
  .index{
    height: 100%;
    .el-container{
      height: 100%;
    }
    .el-header{
      height: 60px;
      background-color: #d8d8d8;
      .logo{
        height: 60px;
        float: left;
        img{
          padding: 10px
        }
      }
      .logout{
        float: right;
        font-weight: 900;
        line-height: 60px;
        >.el-button{
          color: orange;
          font-weight: 900;
        }
        .el-dialog__body{
          padding: 0 20px
        }
      }
      .title{
        overflow: hidden;
        line-height: 60px;
      }
      h1{
        width: 300px;
        text-align: center;
        color: #545c64;
        margin: 0 auto
      }
    }
    .el-aside{
      height: 100%;
      .el-row{
        height: 100%;
        .el-col{
          height: 100%;
        }
        .el-menu{
          border: none
        }
      }
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 100%;
      }
    }
    .el-main{
      background-color: #ecf0f1
    }
  }
</style>
